<template>
  <draggable
    v-model="modelValueComputed"
    item-key="id"
    :component-data="{
      type: 'transition-group',
    }"
    group="option-list"
    handle=".handle"
    :animation="200"
  >
    <template #item="{ element: option, index }">
      <div>
        <div
          :class="tree ? 'grid-cols-[16px_auto_auto_16px_16px]' : 'grid-cols-[16px_auto_auto_16px]'"
          class="flex gap-2 items-center mb-2"
        >
          <!-- class="option-item grid gap-0 items-center mb-2" -->
          <EIcon class="mr-2 text-lg cursor-move handle" name="icon-tuozhuai" />
          <Input v-model="option.label" v-model:value="option.label" placeholder="label" />
          <Input v-model="option.value" v-model:value="option.value" placeholder="value" />
          <EIcon
            v-if="tree"
            class="text-lg"
            name="icon-tianjia1"
            @click="handleAddChildren(option)"
          />

          <EIcon
            class="text-lg hover:text-green-400 cursor-pointer"
            name="icon-zhengque"
            title="设为初始化时选定值"
            @click="handleSetDefaultValue(option)"
            v-if="designer.state.checkedNode?.componentProps?.isOrgvalue"
          />
          <EIcon
            class="text-lg hover:text-red-400 cursor-pointer"
            name="icon-shanchu1"
            @click="handleRemove(index)"
          />
        </div>
        <div class="pl-4" v-if="option.children">
          <KOptionsCol v-model="option.children" />
        </div>
      </div>
    </template>
  </draggable>
</template>

<script lang="ts" setup>
  import draggable from 'vuedraggable';
  import { pluginManager } from '/@/views/formDesigner/utils';
  import { inject, computed } from 'vue';
  import EIcon from '../../components/icon';
  import { Designer } from '../../types/epic-designer';

  interface Option {
    label: string;
    value: string;
    children?: Option[];
  }

  defineOptions({
    name: 'KOptionsCol',
  });

  const props = defineProps<{
    modelValue: Option[];
    record?: any;
  }>();
  const Input = pluginManager.getComponent('input');
  const tree = inject('tree', false);
  const designer = inject('designer') as Designer;

  const emit = defineEmits(['update:modelValue']);
  const modelValueComputed = computed({
    get() {
      return props.modelValue;
    },
    set(value) {
      emit('update:modelValue', value);
    },
  });

  /**
   *  添加选项子选项
   */
  function handleAddChildren(option: Option) {
    const childrenOption: Option = {
      label: '',
      value: '',
    };

    if (option.children) {
      option.children.push(childrenOption);
    } else {
      option.children = [childrenOption];
    }
  }

  /**
   * 删除选项
   * @param index
   */
  function handleRemove(index: number) {
    modelValueComputed.value?.splice(index, 1);
  }

  /**
   * @description: 设为初始化时选定值
   * @param {*} option
   * @return {*}
   */
  function handleSetDefaultValue(option) {
    designer.state.checkedNode![designer.state.checkedNode!.componentProps?.isOrgvalue] =
      option.value;
  }
</script>
